<template>
  <div class="loadWrap">
    <div  v-show="loading" class="loadController">
        <div class="loadContent">
          <i class="el-icon-loading loadingSvg" ></i>
          <span class="loadText">加载中...</span>
        </div>
  </div>
  </div>
</template>

<script>
import isIEBrowser from '@/utils/isIe'
//超出指定行数自动隐藏文字
export default {
  name: "topLoading",
  data(){
    return {
      loading: false
    }
  },
  watch:{
    '$store.state.user.topLoadingStatus'(newV){
      if(newV){
        // if(isIEBrowser()){
        //   return
        // }
        this.loading = true;
      }else{
        let t1 =  setTimeout(()=>{
          this.loading = false;
        },500)
        let t2 =  setTimeout(()=>{
          clearTimeout(t1)
              this.loading = false;
        },800)
        let t3 =  setTimeout(()=>{
          this.loading = false;
          clearTimeout(t2)
          clearTimeout(t3)
        },2000)
      }
    },
    // '$route.path'(newV){
    //   console.log(newV)
    //   if(newV == '/home'|| newV == '/handInvoiceAdd'){
    //     this.loading = false;
    //   }
    // }
  },
}
</script>

<style lang="scss" scoped>
.loadWrap{
  .loadController{
    position: fixed;
    left: 0;
    top: 0;
    width:100vw;
    height: 100vh;
    background-color: rgba(255,255,255,.9);
    transition: opacity .3s;
    z-index: 9999999999;
    .loadContent{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      .loadingSvg{
        font-size: 50px !important;
        color: #409eff;
      }
      .loadText{
        color: #409EFF;
        margin: 3px 0;
      }
    }
  }
}

</style>
